<template>
  <div class="inviteReward front-color">
    <div class="headGuide clearfix">
      <span class="inviteRewrdTitle">{{$t('myAdd.invitation.inviteReward')}}</span>
      <span class="inviteRewrdTotal"><span class="text">{{$t('myAdd.invitation.totalGet')}}:</span><span class="number">{{hasGetReward}}</span><span class="unit">CNY</span></span>
      <span class="back pointer" @click="goBack"><span class="sideIcon"><</span>{{$t('myAdd.invitation.back')}}</span>
    </div>
    <div class="listData">
      <table>
        <thead>
          <tr>
            <th class="nameText">{{$t('myAdd.invitation.name')}}</th>
            <th class="timeText">{{$t('myAdd.invitation.time')}}</th>
            <th class="rewardText">{{$t('myAdd.invitation.reward')}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in showRewardListArr" :key="index">
            <td class="name"><span class="iconSpan"><img :src="item.photoUrl || defaultHeadImg" alt="."></span><span>{{$t('myAdd.invitation.inviteText')}}&nbsp;&nbsp;{{item.userName}}</span></td>
            <td class="time">{{_P.formatTime(item.time)}}</td>
            <td class="reward"><span class="number">+{{item.num}}</span><span>{{item.coin}}</span></td>
          </tr>
        </tbody>
      </table>
      <noData v-if="!rewardListLeng"></noData>
      <VPagination v-if="(inviteRewardPage.count/inviteRewardPage.pageSize) > 1"
                   :total="inviteRewardPage.count"
                   :current-page='inviteRewardPage.page'
                   :display='inviteRewardPage.pageSize'
                   @pagechange="inviteRewardPageChange($event)" class="page">
      </VPagination>
    </div>
  </div>
</template>

<script>
import VPagination from '@/components/common/pagination'
import noData from '@/components/addPage/common/noData'
import defaultHeadImg from '@/assets/img/otc/portrait.png'
export default {
  name: 'inviteReward',
  components: { VPagination, noData },
  data () {
    return {
      defaultHeadImg: defaultHeadImg,
      inviteRewardPage: {
        count: '',
        pageSize: 10,
        page: 1
      },
      rewardList: [],
      showRewardListArr: [],
      hasGetReward: this._P.fixUrl('reward')
    }
  },
  computed: {
    rewardListLeng () {
      return this.inviteRewardPage.count
    }
  },
  mounted () {
    this.getInvitedReward()
  },
  methods: {
    inviteRewardPageChange (page) {
      this.inviteRewardPage.page = page
      this.showRewardListArr = this.rewardList[page - 1]
    },
    goBack () {
      this.$router.go(-1)
    },
    getInvitedReward () {
      this.axios({
        url: this.$store.state.url.invite.reward_list,
        headers: {},
        methods: 'post'
      }).then(res => {
        const _this = this
        if (res.code.toString() === '0') {
          this.rewardList = []
          this.inviteRewardPage.count = res.data.length
          res.data.forEach((item, index) => {
            let page = Math.floor(index / _this.inviteRewardPage.pageSize)
            if (!_this.rewardList[page]) {
              _this.rewardList[page] = []
            }
            _this.rewardList[page].push(item)
          })
          this.showRewardListArr = this.rewardList[this.inviteRewardPage.page - 1]
        } else {
          this.$store.dispatch('setTipState', {text: res.msg, type: 'error'})
        }
      })
    }
  }
}
</script>

